<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏组件 -->
    <TopNavbar 
      :currentUser="currentUser"
      :unreadMessages="unreadMessages"
      :joinedSocietiesCount="joinedSocietiesCount"
      @message-click="handleMessageClick"
      @societies-click="handleSocietiesClick"
      @user-click="handleUserClick"
      @logout="handleLogout"
    />

    <!-- 主内容区域 -->
    <div class="dashboard-main-layout">
      <!-- 页面内容区域 -->
      <main class="dashboard-content-area">
        <div class="dashboard-content">
          <!-- 使用路由视图替代条件渲染 -->
          <router-view 
            :current-page="currentPage"
            :pageTitle="getContentTitle()"
            @navigate="handleNavigate" 
          />
        </div>
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { store } from '../store/index.js'
import TopNavbar from '../components/TopNavbar.vue'
import HomePage from '../pages/HomePage.vue'
import ContentPage from '../pages/ContentPage.vue'
import MyEventsPage from '../pages/MyEventsPage.vue'

const router = useRouter()

// 响应式数据
const currentUser = ref(null)
const currentPage = computed(() => {
  const path = router.currentRoute.value.path
  return path.replace('/dashboard/', '') || 'home'
})
const unreadMessages = ref(3) // 未读消息数量
const joinedSocietiesCount = ref(2) // 加入的社团数量

// 初始化数据
onMounted(() => {
  // 从store获取用户信息
  currentUser.value = store.state.user.userInfo || { 
    username: '管理员',
    id: 'admin' // 默认用户ID
  }
  
  // 为了演示，设置一个默认角色（实际项目中应该从后端获取）
  if (!currentUser.value.role) {
    currentUser.value.role = 'student' // 默认设置为学生角色用于演示
  }
  
  // 确保用户对象包含id属性
  if (!currentUser.value.id) {
    // 生成一个模拟的用户ID
    currentUser.value.id = currentUser.value.username || 'user_' + Math.floor(Math.random() * 10000)
  }
})

// 获取当前页面标题
const getContentTitle = () => {
  // 根据当前用户角色和页面返回相应标题
  if (currentUser?.value?.role === 'student') {
    const titleMap = {
      'profile': '个人信息管理',
      'my-societies': '我的社团',
      'my-events': '我的活动',
      'all-events': '所有活动',
      'messages': '我的消息'
    }
    return titleMap[currentPage.value] || '个人中心'
  } else if (currentUser?.value?.role === 'society_admin') {
    const titleMap = {
      'overview': '社团概览',
      'members': '成员管理',
      'events': '活动管理',
      'notices': '通知管理',
      'society-settings': '社团设置',
      'messages': '消息中心'
    }
    return titleMap[currentPage.value] || '社团管理'
  } else if (currentUser?.value?.role === 'school_admin') {
    const titleMap = {
      'school-overview': '学校概览',
      'society-management': '社团管理',
      'school-events': '活动监管',
      'user-management': '用户管理',
      'school-settings': '学校设置',
      'messages': '消息中心'
    }
    return titleMap[currentPage.value] || '学校管理'
  } else if (currentUser?.value?.role === 'system_admin') {
    const titleMap = {
      'system-overview': '系统概览',
      'school-management': '学校管理',
      'user-management': '用户管理',
      'system-settings': '系统设置',
      'logs': '系统日志',
      'messages': '消息中心'
    }
    return titleMap[currentPage.value] || '系统管理'
  }
  // 默认用户或未指定角色时的标题映射
  const defaultTitleMap = {
    'all-clubs': '所有社团列表'
  }
  return defaultTitleMap[currentPage.value] || '数据概览'
}

// 事件处理函数
const handleNavigate = (page) => {
  // 使用路由跳转
  router.push(`/dashboard/${page}`)
}

const handleMessageClick = () => {
  handleNavigate('messages')
}

const handleSocietiesClick = () => {
  handleNavigate('my-societies')
}

const handleUserClick = () => {
  handleNavigate('profile')
}

const handleLogout = () => {
  store.mutations.clearUserInfo()
  // 跳转回登录页面
  router.push('/login')
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: rgb(218, 230, 243);
}

/* 主布局 */
.dashboard-main-layout {
  display: flex;
  flex: 1;
  overflow: hidden;

}

/* 内容区域 */
.dashboard-content-area {
  flex: 1;
  overflow-y: auto;
}

/* 主要内容区 */
.dashboard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-height: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .dashboard-content {
    padding: 16px;
  }
}
</style>